<template>
  <div class="bg_wrap" v-if="letter">
    <div style="width:100%;margin: 0 auto;">
      <!-- 头部 -->
      <div class="head_wrap">
        <div class="head_left" :style="{width:(isCollapse?'32px':'180px')}">
          <span v-if="!isCollapse" class="four">{{nameone}}</span>
          <span v-if="!isCollapse" class="diliver_wrap"></span>
          <span v-if="!isCollapse" class="out" @click="logout">退出</span>
          <span class="icon iconfont icon-icon-test39" @click="toggleCollapse"></span>
        </div>
        <div class="head_right">
          <span @click="handleClick" v-if="_SHOWBTN('sjdp-yxbg')">运行报告</span>
          <span class="diliver_wrap"></span>
          <span @click="goback">办公系统</span>
          <!-- <a href="http://uat.nlxdt.com:9000"></a> -->
          <div class="rep" v-if="isTrue">
            <div class="rep1" @click="rep1" v-if="_SHOWBTN('sjdp-yxbg-jjb')">精简版</div>
            <div class="rep2" @click="rep2" v-if="_SHOWBTN('sjdp-yxbg-wzb')">详细版</div>
          </div>
        </div>
        <!-- 运行报告 -->
        <!-- 精简版 -->
        <RunRep ref="RunRep"></RunRep>
        <!-- 详细版 -->
        <running-report ref="runReport"></running-report>
      </div>
      <div class="content_wrap">
        <div class="content_left">
          <!-- 三公经费 -->
          <Expenditure></Expenditure>
          <div class="message_info">
            <div class="message_title">
              <img src="../assets/images/right_arrow.png" />
              <span>实时数据</span>
            </div>

            <!-- 报告数据 -->
            <Data></Data>
          </div>

          <!-- 近半年走势图 -->
          <HalfYear></HalfYear>
        </div>
        <!-- 地图 -->
        <div class="content_middle" style="position: relative;">
          <div style="width:800px;height:162px;position: absolute;bottom:20px;display: flex;">
            <div style="flex:1;text-align: center;position: relative;">
              <img src="../assets/images/circle_run.png" class="img_run" />
              <!-- 圈圈 -->
              <!-- <div class="jK" >经开股份</div> -->
              <div class="jingkai">
                <JingKai :id="this.ids" companyName="经开股份" ></JingKai>
              </div>
              <!-- <div class="yZ">亦庄控股</div> -->
              <div class="yizhuang">
                <JingKai :id="this.ids" companyName="亦庄控股"></JingKai>
              </div>
              <!-- <div class="kT">开拓热力</div> -->
              <div class="kaituo">
                <JingKai :id="this.ids" companyName="开拓热力"></JingKai>
              </div>
              <!-- <img src="../assets/images/圈圈2.gif" alt class="first"> -->
              <div class="round">
                <div class="round1">
                  <div class="round5">
                    <div style="color:white;height:104px;transform: translateY(28px);">
                      <div style="font-size:16px">监督单位</div>
                      <div style="font-size:22px">{{jddwCount}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div style="flex:1;text-align: center;position: relative;">
              <img src="../assets/images/circle_run.png" class="img_run" />
              <div class="round" @click="goSupervision">
                <div class="round2">
                  <div class="round5">
                    <div style="color:white;height:104px;transform: translateY(28px);">
                      <div style="font-size:16px">监督对象</div>
                      <div style="font-size:22px">{{jddxCount}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div style="flex:1;text-align: center;position: relative;">
              <img src="../assets/images/circle_run.png" class="img_run" />
              <div class="round" @click="goSupervisionmain">
                <div class="round3">
                  <div class="round5">
                    <div style="color:white;height:104px;transform: translateY(28px);">
                      <div style="font-size:16px">监察对象</div>
                      <div style="font-size:22px">{{jcdxCount}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div style="flex:1;text-align: center;position: relative;">
              <img src="../assets/images/circle_run.png" class="img_run" />
              <div class="round" @click="saveDialogVisible = true">
                <div class="round4">
                  <div class="round5">
                    <div style="color:white;height:104px;transform: translateY(28px);">
                      <div style="font-size:16px">保全总量</div>
                      <div style="font-size:22px">{{bqCount}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_right">
          <!-- 信访举报 -->
          <Letter></Letter>
          <div class="message_info">
            <div class="message_title">
              <img src="../assets/images/right_arrow.png" />
              <span>实时数据</span>
            </div>
            <div class="fenye" id="wrap">
              <ul class="message_content" id="list">
                <li class="data" v-for="item in data" :key="item.id" @click="godetail(item.id)">
                  <div style="flex:3;color:#06FFFF" class="three">{{item.personName}}</div>
                  <div style="flex:3;text-align: center;" class="three">{{item.personOrgName}}</div>
                  <div style="flex:3" class="three">{{item.title}}</div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 信访举报详情 -->
          <ReportDetail ref="runReportDetail" :letter="letter"></ReportDetail>
          <!-- 近半年举报数量走势图 -->
          <Report></Report>
        </div>
      </div>
    </div>

    <!-- 保全总量 -->
    <el-dialog :visible.sync="saveDialogVisible" width="1800px" top="66px">
      <div class="img">
        <img src="../assets/images/baoquan.png" alt />
      </div>
      <div class="banner">
        <div class="left scrollBar">
          <div class="top">
            <div style="flex:1;text-align: center;position: relative;">
              <img src="../assets/images/circle_run.png" class="img_run" />
              <div class="round" @click="saveDialogVisible = true">
                <div class="round4">
                  <div class="round5">
                    <div style="color:white;height:104px;transform: translateY(28px);">
                      <div style="font-size:16px">保全总量</div>
                      <div style="font-size:22px">{{bqCount}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="search">
            <img src="../assets/images/查询条件.png" alt />
          </div>
          <div class="text">
            <el-form ref="form" :model="form" label-width="100px" style="margin-left:43px">
              <el-form-item label="保全编号">
                <el-input v-model="name" placeholder="请输入保全编号"></el-input>
              </el-form-item>
              <el-form-item label="保全时间">
                <el-date-picker
                  v-model="date"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  range-separator="~"
                  start-placeholder="年/月/日"
                  end-placeholder="年/月/日"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="保全类型">
                <el-select v-model="region" placeholder="请选择类型">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>

            <el-button type="primary" class="button">查询</el-button>
            <el-button class="button second">重置</el-button>
          </div>
        </div>
        <div class="right scrollBar">
          <div class="search">
            <img src="../assets/images/result.png" alt />
          </div>
          <el-table :data="tableData" style="width: 100%" fit class="table" :stripe="true">
            <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
            <el-table-column prop="number" label="保全编号" align="center"></el-table-column>
            <el-table-column prop="name" label="保全标题" align="center"></el-table-column>
            <el-table-column prop="address" label="保全类型" align="center"></el-table-column>
            <el-table-column prop="date" label="保全时间" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <span class="yi">查看证书</span>
                <span class="er"></span>
                <span class="san">申请鉴证</span>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="fenye">
            <!-- <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              background
              :current-page="currentPage4"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="  prev, pager, next,sizes, jumper"
              :total="400"
            ></el-pagination>-->
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import echarts from "echarts";
// 近半年举报数量走势图
import Report from "../components/Report.vue";
// 三公经费
import Expenditure from "../components/Expenditure.vue";
// 信访举报
import Letter from "../components/Letter.vue";
// 近半年走势图
import HalfYear from "../components/HalfYear.vue";
// 数据
import Data from "../components/Data.vue";
// 经开
import JingKai from "../components/JingKai.vue";
// 亦庄
import YiZhuang from "../components/YiZhuang.vue";
// 开拓
import KaiTuo from "../components/KaiTuo.vue";
// 运行详细版
import runningReport from "../components/RunningReport.vue";
// 运行精简版
import RunRep from "../components/RunRep.vue";
// 信访举报详情
import ReportDetail from "../components/ReportDetail.vue";
import utils from "@/utils/utils/index.js";
import { getCMSUrl } from "@/utils/tools.js";
import { getCMSUrl1 } from "@/utils/tools.js";
import { getCMSUrl2 } from "@/utils/tools.js";
export default {
  components: {
    Report,
    Expenditure,
    Letter,
    HalfYear,
    Data,
    JingKai,
    YiZhuang,
    KaiTuo,
    runningReport,
    ReportDetail,
    RunRep,
  },
  data() {
    return {
      // 监督单位
      jddwCount: "",
      // 监督对象
      jddxCount: "",
      // 监察对象
      jcdxCount: "",
      // 保全数量
      bqCount: "",
      a: "",
      isCollapse: false,
      isTrue: false,
      form: "",
      // 保全总量
      saveDialogVisible: false,
      // 保全编号
      name: "",
      nameone: "",
      region: "",
      // 保全时间
      date: "",
      // 保全类型
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "1",
          label: "双皮奶",
        },
        {
          value: "2",
          label: "蚵仔煎",
        },
        {
          value: "3",
          label: "龙须面",
        },
        {
          value: "4",
          label: "北京烤鸭",
        },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "数据保全",
          number: "TYUGKG16945474551",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "数据保全",
          number: "TYUGKG16945474551",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "数据保全",
          number: "TYUGKG16945474551",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "数据保全",
          number: "TYUGKG16945474551",
        },
      ],
      currentPage4: 1,
      activeIndex: 0,

      // 列表数据

      data: [],
      letter: [],
      // 公司列表
      companyListData:[],
      // 公司ID
      ids:'',
    };
  },
  watch:{
companyName(){
 
this.companyListData.forEach(res=>{
  if(companyName==res.name){
    this.ids=res.id
  }
 
})
}
  },
  mounted() {
    
    window.onresize = this.resize;
    this.resize();
    this.getCompanyList();
    this.getComplainList();
    this.getCompanyStatistic();
    this.get();
    if (location.href.indexOf("#reloaded") == -1) {
	location.href = location.href + "#reloaded";
	location.reload();
}

  },
  created() {
   
  },
  methods: {
    // 首页公司列表
    getCompanyList(){
this.Api.companyList().then((res)=>{
  this.companyListData=res.data
  
 
})
    },
    goback() {
      let token = localStorage.getItem('LoginToken');
      window.open(`${getCMSUrl()}?token=${token}`, "_blank");
    },
    // 监督对象
    goSupervision(){
 let token = localStorage.getItem('LoginToken');
   window.open(`${getCMSUrl1()}?token=${token}`, "_blank");
    },
    // 监察对象
    goSupervisionmain(){
let token = localStorage.getItem('LoginToken');
   window.open(`${getCMSUrl2()}?token=${token}`, "_blank");
    },
    // 实时信访举报列表
    getComplainList() {
      this.Api.complainList().then((res) => {
        this.data = res.data;
        // this.data.forEach((res, index) => {
        //   if (this.nameone == res.personName) {
        //     this.data.splice(index, 1);
        //   }
        // });
      });
    },
    // 信访举报详细版
    godetail(id) {
      this.$refs.runReportDetail.show();
      this.Api.complainDetail({ id: id }).then((res) => {
        this.letter = res.data;
      });
    },
    // 首页公司举报
    getCompanyStatistic() {
      this.Api.companyStatistic().then((res) => {
        this.bqCount = res.data.bqCount;
        this.jcdxCount = res.data.jcdxCount;
        this.jddxCount = res.data.jddxCount;
        this.jddwCount = res.data.jddwCount;
      });
    },
    get() {
      this.Api.getpersonDetail().then((res) => {
        this.nameone = res.data.realName;
      });
    },
    //侧边栏折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    //设置cookie
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "loginName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },
    //读取cookie
    getCookie: function () {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
        // console.log(arr, "截取cookie第一次");
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); //再次切割
          // console.log(arr, "截取cookie第二次");
          //判断查找相对应的值
          if (arr2[0] == "loginName") {
            // console.log(arr2[1], "arr2[1]用户名");
            this.ruleForm.loginName = arr2[1]; //保存到保存数据的地方
          } else if (arr2[0] == "password") {
            // console.log(arr2[1], "arr2[1]密码");
            this.ruleForm.password = arr2[1];
          }
        }
        this.checked = true;
        this.$nextTick(() => {
          this.login();
        });
      }
    },
    //清除cookie
    clearCookie: function () {
      this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
    },
    logout() {
      //清空Cookie
      this.clearCookie();
      localStorage.clear();
      this.$router.push({ name: "Login" });
    },
    resize() {
      // utils.resize(2560, 1080);
      this.resizeFunc(1920, 1080);
    },
    resizeFunc(designWidth, designHeight) {
      console.log("widht:", designWidth, "height:", designHeight);
      $("body").css("width", designWidth + "px");
      $("body").css("height", designHeight + "px");
      $("#app").css("width", designWidth + "px");
      $("#app").css("height", designHeight + "px");
      // let { availWidth, availHeight } = window.screen;
      let availWidth = window.innerWidth;
      let availHeight = window.innerHeight;
      $("html").css("width", availWidth + "px");
      $("html").css("height", availHeight + "px");
      // 页面宽度缩放
      var rx = availWidth / designWidth;
      // 页面高度缩放
      var ry = availHeight / designHeight;
      // 页面宽度偏移量
      var lx = -(designWidth - availWidth) / 2;
      // 页面高度偏移量
      var ly = -(designHeight - availHeight) / 2;
      $("body").css(
        "transform",
        "matrix(" + rx + ",0,0," + ry + "," + lx + "," + ly + ")"
      );
    },
    getVideoList() {
      // api.indexFarm("video", null).then(res => {
      //   const { data } = res.data;
      //   if (data.length) {
      //     this.video_info = {
      //       id: 0,
      //       devId: data[0].devId,
      //       src: data[0].devRtspUrl
      //     };
      //   }
      // });
    },
    weatherClick(item) {
      this.lineChartCfg = item;
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleClick() {
      this.isTrue = !this.isTrue;
    },
    rep1() {
      this.isTrue = !this.isTrue;
      this.$refs.RunRep.show();
    },
    rep2() {
      this.isTrue = !this.isTrue;
      this.$refs.runReport.show();
    },
  },
};
</script>

<style lang="less" scoped>
html,
body,
div {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: #3cdfff;
}
.yizhuang {
  position: absolute;
  top: -60px;
  left: 60px;
}
.kaituo {
  position: absolute;
  top: -120px;
  left: 40px;
}
.bg_wrap {
  width: 1920px;
  height: 1080px;
  background: url("../assets/images/bg.png");
  background-repeat: no-repeat;
}

.head_wrap {
  height: 80px;
  width: 100%;
  background: url("../assets/images/head.png");
  background-repeat: no-repeat;
  position: relative;
}
.four {
  text-align: center;
  display: inline-block;
  width: 95px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.three {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.head_left {
  position: absolute;
  top: 30px;
  height: 36px;
  line-height: 36px;
  box-shadow: 0px 3px 8px 0px rgba(6, 98, 255, 1);
  border-radius: 0px 3px 3px 0px;
  border: 2px solid rgba(5, 203, 227, 1);
  color: rgba(6, 255, 255, 1);
  display: flex;
}

.head_left span {
  font-size: 19px;
  font-weight: 400;
}

.diliver_wrap {
  display: inline-block;
  margin: 0 10px;
  width: 1px;
  height: 20px;
  margin-top: 8px;
  background: rgba(6, 255, 255, 1);
  box-shadow: -2px 0px 6px 0px rgba(6, 255, 255, 0.5);
  opacity: 0.7;
}
.rep {
  width: 104px;
  height: 94px;
  font-size: 19px;
  font-weight: 400;
  // background: url("../assets/images/rep.png");
  text-align: center;
  line-height: 46px;
  position: absolute;
  top: 40px;
  z-index: 999;
}
.rep1{
  background: url("../assets/images/rep.png");
}
.rep2{
  background: url("../assets/images/rep.png");
}
.head_right {
  position: absolute;
  top: 30px;
  font-size: 24px;
  font-weight: 500;
  right: 70px;
  width: 350px;
  height: 36px;
  line-height: 36px;
  color: rgba(6, 255, 255, 1);
}

.content_wrap {
  width: 100%;
  height: 800px;
  display: flex;
}

.content_left {
  width: 509px;
  background: url("../assets/images/kuang.png");
  height: 986px;
  margin-left: 20px;
}

.message_info {
  width: 452px;
  margin: 24px 30px;
  height: 295px;
}

.message_title {
  padding: 6px 0;
  width: 100%;
  height: 45px;
  font-size: 28px;
  font-weight: 500;
  color: #06ffff;
  line-height: 45px;
}

.message_title img {
  height: 24px;
  width: 24px;
}

.message_content {
  position: relative;
  transition: top 0.5s;
  -webkit-transition: top 0.5s;
  margin-top: 0;
}

.content_middle {
  width: 800px;
  height: 986px;
  margin-left: 20px;
  background-image: url("../assets/images/map.png");
  background-repeat: no-repeat;
}

.content_right {
  width: 509px;
  background: url("../assets/images/kuang.png");
  height: 986px;
  margin-left: 20px;
}

// 列表动画
#wrap {
  height: 250px;
  overflow: hidden;
  position: relative;
}
#list {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  -webkit-animation: 10s move infinite linear;
  width: 100%;
}
#wrap:hover #list {
  -webkit-animation-play-state: paused;
}
@-webkit-keyframes move {
  0% {
    top: 0;
  }

  100% {
    transform: translateY(-50%);
  }
}
@keyframes turnAround {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.img_run {
  animation: turnAround 4s linear infinite;
}
.out {
  font-size: 16px;
}
.icon {
  font-size: 14px;
  margin-left: 3px;
}
.data {
  display: flex;
  padding: 0 16px;
  background: rgba(10, 70, 242, 0.2);
  height: 45px;
  line-height: 45px;
  font-size: 19px;
  color: white;
  transition: top 0.5s;
  -webkit-transition: top 0.5s;
}
.data:nth-child(odd) {
  background: #020b8a;
}
.first {
  position: absolute;
  left: 100px;
  top: -200px;
}
.round {
  width: 138px;
  height: 138px;
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #0a46f2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.round1 {
  margin: auto;
  margin-top: 5px;
  padding-top: 12px;
  border-radius: 50%;
  width: 128px;
  height: 116px;
  background: linear-gradient(
    270deg,
    rgba(4, 196, 252, 1) 0%,
    rgba(185, 22, 242, 1) 100%
  );
}
.round2 {
  margin: auto;
  margin-top: 5px;
  padding-top: 12px;
  border-radius: 50%;
  width: 128px;
  height: 116px;
  background: linear-gradient(
    270deg,
    rgba(4, 196, 252, 1) 0%,
    rgba(77, 184, 156, 1) 100%
  );
}
.round3 {
  margin: auto;
  margin-top: 5px;
  padding-top: 12px;
  border-radius: 50%;
  width: 128px;
  height: 116px;
  background: linear-gradient(
    270deg,
    rgba(4, 196, 252, 1) 0%,
    rgba(22, 61, 242, 1) 100%
  );
}
.round4 {
  margin: auto;
  margin-top: 5px;
  padding-top: 12px;
  border-radius: 50%;
  width: 128px;
  height: 116px;
  background: linear-gradient(
    270deg,
    rgba(4, 196, 252, 1) 0%,
    rgba(96, 91, 247, 1) 100%
  );
}
.round5 {
  margin: auto;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: rgb(11, 18, 138);
}
.fenye {
  height: 250px;
  overflow: hidden;
  position: relative;
}

/deep/.el-dialog__header {
  background: url("../assets/images/gongsi.png") #000080;
  background-position: 20px;
  background-repeat: no-repeat;
  position: relative;
  padding: 81px 20px 10px 30px;
  box-sizing: border-box;
  width: 100%;
}
/deep/.el-dialog__body {
  padding: 30px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
  background: url("../assets/images/bg.png");
  background-repeat: repeat !important;
  height: 800px !important;
}

.banner {
  width: 1760px;
  height: 800px !important;
  padding: 30px 0;
  background: url("../assets/images/框1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 70px;
  display: flex;
}
.left {
  width: 540px;
  height: 720px;
  border-right: 2px solid #0a46f2;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px;
  overflow-y: auto;
}
.right {
  width: 1174px;
  height: 790px;
  margin-top: 20px;
  padding: 20px;
  overflow-y: auto;
}
.top {
  margin-top: 64px;
}
.search {
  flex: 1;
  text-align: center;
  margin-top: 34px;
}
.text {
  margin-top: 34px;
}
/deep/.left .el-input__inner {
  height: 48px;
  line-height: 48px;
  width: 368px;
  background: #000080 !important;
  border: none;
  outline: medium;
}
/deep/.el-range-editor .el-range-input {
  line-height: 1;
  background: #000080;
}
/deep/.el-form-item__label {
  height: 48px;
  line-height: 48px;
  font-size: 20px;
  color: white;
}
/deep/.el-form-item__content {
  line-height: 40px;
  position: relative;
  margin-bottom: 20px !important;
  font-size: 14px;
}
.button {
  margin: 0px 20px 0 143px;
}
.second {
  background: #000080;
}
.table {
  margin-top: 22px;
}
.yi {
  display: inline-block;
  width: 76px;
  height: 26px;
  text-align: center;
  font-size: 19px;

  color: rgba(6, 255, 255, 1);
  line-height: 26px;
}
.san {
  display: inline-block;
  width: 76px;
  height: 26px;
  font-size: 19px;
  text-align: center;
  color: rgba(6, 255, 255, 1);
  line-height: 26px;
}
.er {
  display: inline-block;
  width: 2px;
  height: 18px;
  background: #06ffff;
  margin: 0 13px;
}
/deep/.el-table .cell {
  font-size: 19px;
}
/deep/.el-table {
  background: #000080 !important;
}

/deep/ .el-table__header-wrapper {
  .has-gutter {
    tr {
      th {
        background: #000099 !important;
      }
    }
  }
}
.right .fenye {
  display: flex;
  justify-content: center;
  margin-top: 35px;
}
/deep/.el-pagination .el-select .el-input .el-input__inner {
  padding-right: 25px;
  border-radius: 3px;
  background: #000099;
}
/deep/.el-pager li {
  margin: 0 5px;

  color: white !important;
  min-width: 30px;
  border-radius: 2px;
  background: #000099 !important;
}
/deep/.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  margin: 0 5px;

  color: white;
  min-width: 30px;
  background: #000080;
  border-radius: 2px;
}
/deep/ .el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  margin: 0 5px;

  color: white;
  min-width: 30px;
  background: #000080;
  border-radius: 2px;
}
/deep/.el-pagination__jump {
  margin-left: 24px;
  font-weight: 400;
  color: white;
}
/deep/.el-pagination__editor.el-input .el-input__inner {
  height: 28px;
  color: white;
  background: #000080;
}
/deep/.el-table--enable-row-transition .el-table__body td {
  color: white;
  background: #000080;
}
/deep/.el-table th > .cell {
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  color: white;
}
/deep/.el-table__body tr:hover > td {
  background-color: #0a46f2 !important;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #1677ff !important;
  color: #fff;
}
/deep/.el-table--striped
  .el-table__body
  tr.el-table__row--striped.el-table__row--striped.el-table__row--striped
  td {
  background-color: #000099; /*替换为你需要的颜色，觉得优先级不够就加!important*/
}
/deep/.el-table td,
.el-table th.is-leaf {
  border-bottom: none;
}
/deep/.el-table th.is-leaf {
  border-bottom: none;
}
/deep/.el-table__row > td {
  border: none;
}
/deep/.el-table::before {
  //去掉最下面的那一条线
  height: 0px;
}
/deep/.el-icon-close:before {
  content: "\e6db";
  position: absolute;
  left: -40px;
  top: -9px;
  color: #06ffff;
}
.img {
  width: 196px;
  height: 55px;
  position: absolute;
  left: 800px;
  top: 21px;
}
</style>